<template>
  <h1>提问详情</h1>
  <div class="s-container">
    <el-card class="box-card"
             shadow="hover">
      <template #header>
        <div class="s-title">
          {{ ask.title }}
        </div>
      </template>
      <div class="s-summary">
        {{ask.content}}
      </div>
      <div class="s-foot">
        <div class="s-nickname">
          提问用户 🙋： {{ ask.nickname }}
        </div>
        <div class="s-time">
          提问时间⌚： {{ new Date(ask.time * 1000).toLocaleString() }}
        </div>
      </div>
    </el-card>
  </div>
  <h3>全部回答</h3>
  <div>
    <el-button @click="addReply">我来回答</el-button>
  </div>
  <div v-for="r in replies" :key="r.id" class="ask-repl-block">
    <div style="text-align: left;position: relative">
      <div class="teacher-icon" v-if="r.isTeacher">
        <span style="font-size: 20px">🌟</span> 教师回答
      </div>
      {{r.content}}
    </div>
    <div class="s-foot">
      <div class="s-nickname">
        回答用户 🙋： {{ r.nickname }}
      </div>
      <div class="s-time">
        回答时间⌚： {{ new Date(r.time * 1000).toLocaleString() }}
      </div>
    </div>
  </div>
  <div class="hasnomore">
    没有更多回答了
  </div>
  <el-dialog v-model="modalVisible" title="回答" :before-close="onCloseModal">
    <el-form label-width="80px">
      <el-form-item label="回答内容">
        <el-input v-model="content" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {Ask} from "../../utils/http/ask";
import {ElMessageBox} from "element-plus";

export default {
  name: "AskBrowser",
  data:function (){
    return{
      aid : 0,
      ask : {},
      replies : [],
      modalVisible : false,
      content : ""
    }
  },
  methods:{
    addReply(){
      this.content = "";
      this.modalVisible = true;
    },
    async onSubmit(){
      let resp = await Ask.addReply({
        askId:this.aid,
        nickname:this.$store.state.userInfo.nickname,
        content:this.content
      })
      if (resp.success){
        this.$success("回答成功")
        this.modalVisible = false
        this.getReplies()
      }else {
        this.$error("回答失败 ： "+resp.message)
      }
    },
    async getAskDetail(){
      let resp = await Ask.getAskById(this.aid)
      if (resp.success){
        this.ask = resp.data
      }
    },
    async getReplies(){
      let resp = await Ask.getRepliesByAsk(this.aid)
      if (resp.success){
        this.replies = resp.data.replies
      }
    },
    onCloseModal(done){
      ElMessageBox.confirm(
        '您的修改尚未保存，确认关闭？',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          done()
        })
        .catch(()=>{})
    }
  },
  mounted() {
    this.aid = parseInt(this.$route.params.aid)
    this.getAskDetail()
    this.getReplies()
  }

}
</script>

<style scoped>
.title {
  font-size: 36px;
  margin-bottom: 20px;
}
.s-container{
  width: 1000px;
  margin: 0 auto;
}
.box-card {
  font-size: 16px;
  margin: 20px;
  font-weight: normal;
  text-align: left;
}

.s-title {
  font-size: 20px;
  text-align: left;
}

.s-summary {
  height: 100px;
}

.s-foot {
  display: flex;
  justify-content: space-between;
}

.ask-repl-block{
  width: 800px;
  margin: 20px auto;
  box-shadow: 0 0 2px 0 rgba(0, 30, 30, .26);
  padding: 20px;
}

.ask-repl-block > .s-foot{
  padding-top: 10px;
  border-top: 1px solid #ccc;
  margin-top: 10px;
}

.hasnomore{
  margin-top: 20px;
  color: #bbb;
  font-size: 14px ;
}

.teacher-icon{
  position: absolute;
  top: -40px;
  left: -40px;
  background: white;
  z-index: 9;
  color: #53a8ff;
  user-select: none;
  border: 1px solid #53a8ff;
  border-radius: 10px 0 0 0;
  padding: 3px;
}


</style>
